<template>
  <div class="container">
    <div class="header">
      <el-button type="primary" icon="el-icon-plus" @click="add"
        >添加用户</el-button
      >s
      <div>
        <el-input
          @keydown.enter.native="look"
          @input="look"
          clearable
          v-model="search"
          placeholder="搜索姓名"
        ></el-input
        ><el-button
          @click="look"
          type="primary"
          icon="el-icon-search"
        ></el-button>
      </div>
    </div>
    <div
      class="footer"
      v-loading="loading"
      element-loading-text="拼命加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgb(34, 38, 83 )"
    >
      <el-table :data="tableData" style="width: 100%">
        <el-table-column label="日期" align="center">
          <template slot-scope="scope">
            <i class="el-icon-time"></i>
            <span v-if="scope.row.edit" style="margin-left: 10px">{{
              scope.row.date
            }}</span>
            <el-date-picker
              v-else
              v-model="scope.row.date"
              type="date"
              @change="chooseTime()"
              format="yyyy-MM-dd"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column label="姓名" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.edit">{{ scope.row.name }}</span>
            <el-input
              v-else
              v-model="scope.row.name"
              autocomplete="off"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="角色" align="center">
          <template slot-scope="scope">
            <span v-if="scope.row.edit">{{ scope.row.role }}</span>
            <el-input
              v-else
              v-model="scope.row.role"
              autocomplete="off"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">
            <el-button
              icon="el-icon-edit"
              v-if="scope.row.edit"
              size="mini"
              style="margin-right: 10px"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              v-else
              icon="el-icon-success"
              size="mini"
              style="margin-right: 10px"
              @click="save(scope.$index, scope.row)"
              >保存</el-button
            >
            <el-popconfirm
              confirm-button-text="好的"
              cancel-button-text="不用了"
              icon="el-icon-info"
              icon-color="red"
              title="这是一段内容确定删除吗？"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <el-button
                icon="el-icon-delete"
                size="mini"
                type="danger"
                slot="reference"
                >删除</el-button
              >
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        class="pag"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15]"
        :page-size="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="2"
      >
      </el-pagination>
    </div>
    <Dialog title="新增用户" ref="addDialog" @add="Add" />
  </div>
</template>

<script>
export default {
  name: 'DemoUser',

  data() {
    return {
      search: '',
      tableData: [],
      loading: false,
      searchTableData: [],
      currentPage: 1,
    };
  },

  mounted() {
    this.queryData();
  },

  methods: {
    queryData() {
      this.loading = true;
      this.$http
        .getUserinfo()
        .then((res) => {
          if (res.status == 200) {
            const arr = res.data;
            const result = arr.map((item) => {
              item.edit = true;
              return item;
            });
            this.tableData = result;
            this.searchTableData = result;
            this.loading = false;
          }
        })
        .catch((err) => {});
    },
    add() {
      this.$nextTick(() => {
        this.$refs.addDialog.dialogFormVisible = true;
      });
    },
    Add(e) {
      this.tableData.unshift(e);
      this.$message.success('添加成功');
    },
    look() {
      // if (this.search) {
      //   this.tableData = this.searchTableData.filter(
      //     (i) => i.name == this.search
      //   );
      // } else {
      //   this.queryData();
      // }
      this.tableData = this.searchTableData.filter((i) => {
        const result = i.name.indexOf(this.search);
        if (result > -1) {
          return true;
        }
      });
    },
    save(i, r) {
      r.edit = true;
    },

    handleEdit(i, row) {
      let Arr = this.tableData.filter((item) => item.edit == false);
      console.log(Arr);
      if (Arr.length >= 1) {
        this.$message({
          message: '请先保存已修改',
          type: 'warning',
        });
      } else {
        row.edit = false;
      }
      // console.log(this.tableData);
    },
    handleDelete(index, row) {
      this.tableData.splice(index, 1);
      this.$message({
        message: '删除成功',
        type: 'success',
      });
    },
    handleSizeChange(e) {
      console.log(e);
    },
    handleCurrentChange(e) {},
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  .header {
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .el-input {
      width: 200px;
      margin-right: 10px;
    }
  }
  .footer {
    width: 100%;
    height: 400px;
    .pag {
      float: right;
      margin-top: 10px;
      margin-right: 10px;
    }
  }
}
</style>
